<template>
  <div class="case">
    <na-table :datas.sync="tableData" :searchObj.sync="search" @updateDatas="getScrapList">
    </na-table>
    <!--  查看报废出库弹框   -->
    <el-dialog title="查看报废出库" :visible.sync="isSeevisible" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%">
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">出库单号：</span>{{ outForm.outStockBillNo || '系统自动生成' }}</span>
          <span class="mr15"><span
              class="mr5">创建日期：</span>{{ outForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ outForm.createPersonName }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form ref="outForm" :model="outForm" label-width="95px" disabled label-position="left"
            class="dialogForm dialogInlineForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="出库类型">
                  <el-input v-model="outForm.outStockTypeName" placeholder="请输入" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input v-model="outForm.scrapBillNo" placeholder="关联单据" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input v-model="outForm.applyPersonName" placeholder="请输入内容" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="报废备注" class="inlineText" prop="outStockRemark">
                  <el-input v-model="outForm.outStockRemark" type="textarea" :rows="1" placeholder="请输入退货备注" size="mini"
                    clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">报废明细</span>
            </div>
            <el-table ref="multipleTable" :data="outForm.mxDataList" border fit style="width: 100%"
              :expand-row-keys="expends" :row-key="getRowKeys">
              <el-table-column type="expand">
                <template slot-scope="{row}">
                  <div class="dialogExpandTable">
                    <el-table :data="row.productPackageList || []" :header-cell-style="{background:'#3f61f110'}">
                      <el-table-column prop="cartonSizeName" label="纸箱规格" min-width="90" />
                      <el-table-column prop="packageDescription" label="包装描述" min-width="90" />
                      <el-table-column prop="eachBoxQuantityStr" label="每箱数量" min-width="90" />
                      <el-table-column prop="stockBoxCount" label="库存箱数" min-width="90" />
                      <el-table-column prop="stockQuantity" label="库存数量" min-width="90">
                        <template slot-scope="scope">
                          <div class="flex">
                            <template>
                              <span class="mr5" style="color: #E13335">{{ scope.row.stockQuantity }}</span>
                            </template>
                          </div>
                        </template>
                      </el-table-column>

                      <el-table-column label="报废箱数" prop="outStockBoxAmount" show-overflow-tooltip min-width="90" />
                      <el-table-column label="报废数量" prop="outStockQuantity" show-overflow-tooltip min-width="90" />
                      <el-table-column label="备注" prop="outStockMxRemark" show-overflow-tooltip min-width="90" />
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productNo" label="成品编号" width="120" />
              <el-table-column prop="productTypeName" label="成品类型" width="120" />
              <el-table-column prop="productName" label="产品名称" width="auto" />
              <el-table-column prop="printingSurface" label="版面" width="120" />
              <el-table-column prop="productVersion" label="版本" width="120" />
              <el-table-column prop="sumBoxCount" label="库存箱数" width="120" />
              <el-table-column prop="sumStockQuantity" label="库存数量" width="120">
                <template slot-scope="scope">
                  <div class="flex">
                    <template>
                      <span class="mr5" style="color: #E13335">{{ scope.row.sumStockQuantity }}</span>
                    </template>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="productUnit" label="单位" width="60" />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isSeevisible=false">取 消</el-button>
        <!-- 确定       -->
        <el-button type="primary" size="mini" @click="isSeevisible=false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    arraySort
  } from '@/utils'
  import naTable from "@/components/naTable";
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: '',
    components: {
      naTable
    },
    computed: {
      ...mapGetters([
        'name',
        'userInfo'
      ])
    },
    data() {
      return {
        isSeevisible: false, // 查看弹框是否打开
        infoLoading: false,
        searchLoading: false, // 列表加载效果
        search: {
          QueryDataBaseFiled: '',
          pageIndex: 1,
          pageSize: 30,
          outStockType: 1, // 出库类型
          likeWords: ''
        },
        total: 0,
        dataLists: [],
        tableHead: [], // 表头
        tableHeight: null,
        expends: [],
        outForm: {},

        tableData: {
          headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
          tableId: 'outStockBillID', //表格列表key,也就是一条数据的唯一标识
          senior: false, //高级搜索是否显示
          disableWord: '', //是否禁用显示的字段
          disableStatus: '', //判断未禁用的状态值
          addTitle: '', //新建按钮名称-为''则不显示，为undefine则为新建
          addPermission: '', //新建按钮权限
          addIcon: '', //新建按钮icon
          voidWord: '', //需要查询作废的字段
          statusList: [], //状态筛选条件列表
          statusWord: '', //状态筛选的字段
          refresh: true, //刷新按钮
          //表格按钮
          operationBtn: [{
            title: '查看', //按钮名称
            methodsName: 'seeInfo', //按钮绑定方法的字段
          }],
          //表格内容
          tbody: [],
          //表格表头
          thead: [],
        },
      }
    },
    created() {
      // 报废出库表头
      this.getTableHead()
    },
    mounted() {},
    methods: {
      getRowKeys(row) {
        return row.productNo
      },
      // 查看领料出库
      seeInfo(data) {
        this.isSeevisible = true
        this.ops = 'see'
        this.getInfo(data.outStockBillID)
      },
      // 领料单详情
      getInfo(id) {
        const params = {
          outStockBillID: id
        }
        this.infoLoading = true
        this.$api.warehouse.GetCPScrapOutStockBillDetail(params).then(res => {
          this.outForm = res.baseData
          this.outForm.mxDataList = res.mxDataList
          this.infoLoading = false
        }).catch(() => {
          this.infoLoading = false
        })
      },
      // 报废出库表头
      getTableHead() {
        const parmas = {
          tableCode: this.$config.cpscrapoutstocklist
        }
        this.$api.common.getAllTableHead(parmas).then(res => {
          res.sort(arraySort('columnSort'))
          this.tableData.thead = res;
          // 报废出库列表
          this.getScrapList()
        })
      },
      // 报废出库列表
      getScrapList() {
        const params = this.search
        this.searchLoading = true
        this.$api.warehouse.GetMatchPageCPScrapOutStockBillDataList(params).then(res => {
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount;
          this.searchLoading = false
        }).catch(() => {
          this.searchLoading = false
        })
      },
      // 保存表头样式变化
      saveHead(newArray) {
        const parmas = newArray
        setTimeout(() => {
          this.$api.common.saveTableStyle(parmas).then(() => {})
        }, 300)
      },
    }
  }

</script>
<style lang="scss" scoped>
  .spot {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 100%;
  }

  .subTip {
    border-bottom: 1px #e6e6e6 solid;
    background: #f5f6f9;
    padding: 8px 16px;
  }

  .addWuliaoBox {
    padding: 10px 16px;

    .tableBox {
      margin-top: 16px;
      border: 1px solid #e6e6e6;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      overflow: hidden;

      .tt {
        height: 38px;
        line-height: 38px;
        padding-left: 16px;
        background: #f7f8fa;
        border-radius: 8px 8px 0 0;
      }
    }
  }

</style>
